<template>
    <div class="form1 pb100">
        <sc-title>基本信息 (必填)</sc-title>
        <van-form ref="van-form" scroll-to-error :show-error="false">
            <!-- 报考类型-->
            <van-field
                :value="subForm.applyProject"
                required
                input-align="right"
                error-message-align="right"
                name="applyProject"
                label="报考类型"
                placeholder="点击选择报考类型"
                @click="popup.applyProject = true"
                :rules="[{ required: true, message: '请选择报考类型' }]"

                right-icon="arrow-down"
                readonly
                clickable
            />
            <van-popup v-model="popup.applyProject" position="bottom">
                <van-picker
                    title="选择报考类型"
                    show-toolbar
                    :columns="['音乐', '舞蹈', '篮球', '美术']"
                    @confirm="(value)=>{subForm.applyProject = value;popup.applyProject = false}"
                    @cancel="popup.applyProject = false"
                />
            </van-popup>
            <!--学生姓名-->
            <van-field
                v-model="subForm.name"
                required
                input-align="right"
                error-message-align="right"
                name="name"
                label="学生姓名"
                placeholder="请填写姓名"
                :rules="[{ required: true, message: '请填写姓名' }]"
            />
            <!--性别-->
            <van-field required name="gender" label="性别" input-align="right">
                <template #input>
                    <van-radio-group v-model="subForm.gender" direction="horizontal">
                        <van-radio name="男">男</van-radio>
                        <van-radio name="女">女</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <!--身高-->
            <van-field
                v-model="subForm.height"
                required
                input-align="right"
                error-message-align="right"
                name="height"
                type="number"
                label="身高(厘米)"
                placeholder="请填写身高"
                :rules="[{ required: true, message: '请填写身高' }]"
            >

                <template #right-icon>
                    cm
                </template>
            </van-field>
            <!--民族-->
            <van-field
                v-model="subForm.nationality"
                required
                input-align="right"
                error-message-align="right"
                name="nationality"
                label="民族"
                placeholder="请填写民族"
                :rules="[{ required: true, message: '请填写民族' }]"
            />

            <!-- 出生年月-->
            <van-field
                :value="subForm.born"
                required
                input-align="right"
                error-message-align="right"
                name="born"
                label="出生年月"
                placeholder="年-月-日"
                @click="popup.born = true"
                :rules="[{ required: true, message: '请选择报出生年月' }]"

                right-icon="arrow-down"
                readonly
                clickable
            />
            <van-popup v-model="popup.born" position="bottom">
                <van-datetime-picker
                    :minDate="new Date(1990, 1, 1)"
                    type="date"
                    title="选择出生年月"
                    @confirm="(date)=>{
                     subForm.born=`${
                    date.getFullYear()}-${(date.getMonth()+1)<10
                    ?
                    ('0'+(date.getMonth()+1)):(date.getMonth()+1)
                     }-${(date.getDate())<10
                    ?
                    ('0'+date.getDate())
                    :
                    date.getDate()
                     }`;popup.born=false}"
                    @cancel="popup.born=false"
                />
            </van-popup>

            <!--            <van-calendar-->
            <!--                v-model="popup.born"-->
            <!--                @confirm="(date)=>{subForm.born=`${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;popup.born=false}"/>-->
            <!--现就读学校-->
            <van-field
                v-model="subForm.currentSchool"
                required
                input-align="right"
                error-message-align="right"
                name="currentSchool"
                label="现就读学校"
                placeholder="请填写现就读学校"
                :rules="[{ required: true, message: '请填写现就读学校' }]"
            />

            <!--学籍号码-->
            <van-field
                v-model="subForm.studentNo"
                required
                input-align="right"
                error-message-align="right"
                name="studentNo"
                label="学籍号码"
                placeholder="请填写学籍号码"
                :rules="[{ required: true, message: '请填写学籍号码' }]"
            />

            <!--是否团员-->
            <van-field required name="isMember" label="是否团员" input-align="right" error-message-align="right">
                <template #input>
                    <van-radio-group v-model="subForm.isMember" direction="horizontal">
                        <van-radio name="否">否</van-radio>
                        <van-radio name="是">是</van-radio>
                    </van-radio-group>
                </template>
            </van-field>

            <!--身份证号-->
            <van-field
                v-model="subForm.idCard"
                name="idCard"
                required
                input-align="right"
                error-message-align="right"
                label="身份证号"
                placeholder="请填写身份证号"
                :rules="[{ required: true, message: '请填写身份证号' }]"
            />

            <!--家庭住址-->
            <van-field
                v-model="subForm.familyAddress"
                name="familyAddress"
                required
                input-align="right"
                error-message-align="right"
                label="家庭住址"
                placeholder="请填写家庭住址"
                :rules="[{ required: true, message: '请填写家庭住址' }]"
            />

            <!--户口所在地-->
            <van-field
                v-model="subForm.accountAddress"
                name="accountAddress"
                required
                input-align="right"
                error-message-align="right"
                label="户口所在地"
                placeholder="请填写户口所在地"
                :rules="[{ required: true, message: '请填写户口所在地' }]"
            />

            <!--上传图片-->
            <van-field :value="subForm.base64ImageData" required name="base64ImageData" labelWidth="200" label="上传图片(请上传一寸照片)" input-align="right"
                       error-message-align="right"
                       :rules="[{ required: true, message: '请上传图片' }]">
                <template #input>
                    <div class="change-img flex-row-c-c">
                        <input
                            class="cover-view"
                            type="file"
                            accept="image/png,image/jpg,image/jpeg"
                            @change="selectImg($event)"
                        />
                        <div v-if="!subForm.base64ImageData" class="flex-col-c-c"><span class="saasIcon">&#xe641;</span>
                            <p style="font-size:13px;color:#ccc">295px/413px</p>
                        </div>
                        <img v-else :src="subForm.base64ImageData" alt="">
                    </div>
                </template>
            </van-field>
        </van-form>

        <div class="fixed-btn" v-if="!isFous">
            <sc-button type="stop" width="150px" @click="reset">清空</sc-button>
            <div class="ml10">
                <sc-button width="190px" @click="onSubmit">保存,下一步</sc-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "form1",
    data() {
        return {
            popup: {
                applyProject: false,//报考类型
                born: false,//出生年月
            },
            subForm: {
                applyProject: '',//报考类型
                name: '',//姓名
                gender: '男',//性别
                height: '',//身高
                nationality: '汉族',//民族
                born: '',//出生年月
                currentSchool: '',//现就读学校
                studentNo: '',//学籍号码
                isMember: '否',//是否团员
                idCard: '',//身份证号
                familyAddress: '',//家庭住址
                accountAddress: '',//户口所在地
                base64ImageData: '',//上传图片 图片Base64
            },
            base64Img: "",
        }
    },
    watch: {
        base64Img: {
            handler(nval) {
                this.subForm.base64ImageData = nval
            }
        }
    },
    created() {
        if (this.$ls.get('subForm1')) this.subForm = this.$ls.get('subForm1')
    },
    destroyed() {
        this.$ls.set('subForm1', this.subForm)
    },
    methods: {
        onSubmit() {
            this.$refs['van-form'].validate().then(() => {
                // 验证通过
                this.$ls.set('subForm1', this.subForm)
                this.$toast.success('保存成功！\n下一步')
                setTimeout(() => {
                    this.$emit('changeStep', 1)
                }, 1000)
            }).catch(() => {
                //验证失败
                this.$toast.fail('必填项\n未填写')
            })
        },
        reset() {
            this.subForm = {
                applyProject: '',//报考类型
                name: '',//姓名
                gender: '男',//性别
                nationality: '汉族',//民族
                born: '',//出生年月
                currentSchool: '',//现就读学校
                studentNo: '',//学籍号码
                isMember: '否',//是否团员
                idCard: '',//身份证号
                familyAddress: '',//家庭住址
                accountAddress: '',//户口所在地
                base64ImageData: '',//上传图片 图片Base64
            }
            this.$toast.success('重置成功！')
            this.$ls.set('subForm1', this.subForm)
        },
        async selectImg(event) {
            this.clip(event, {
                resultObj: {},
                aspectRatio: 295 / 413,
            });
        },
    },
}
</script>
<style lang='scss' scoped>
.form1 {
    .change-img {
        background: #F7F8FA;
        position: relative;
        width: calc(295px / 3);
        height: calc(413px / 3);
        overflow: hidden;

        img {
            width: calc(295px / 3);
        }

        .saasIcon {
            font-size: 30px;
            color: #ccc;
        }
    }
}
</style>
